<template>
  <div>
     <el-container class="myel">
  <el-aside width="200px">
    <h1 class="logo">黑马头条</h1>
    <el-menu default-active="1" background-color="#000" text-color="#fff" active-text-color="#ffd04b">
    <el-menu-item index="1">
        <i class="el-icon-menu"></i>
        <span slot="title" @click="$router.push('/postlist').catch(()=>{})">文章列表</span>
    </el-menu-item>
    <el-menu-item index="2">
        <i class="el-icon-setting"></i>
        <span slot="title" @click="$router.push('/undit').catch(()=>{})">添加文章</span>
    </el-menu-item>
</el-menu>
  </el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>
      <!-- 增加坑位 -->
       <router-view />
    </el-main>
  </el-container>
</el-container>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
 
}
</script>
<style lang="less" scoped>
  .el-header{
    background-color: #999;
    color: #fff;
    
  }
  
  .el-aside {
    background-color: #000;
    color: #fff;
    
  }
  
  .el-main {
    background-color: #fff;
    color: #333;
  }
  .myel{
    height: 100vh;
  }
  .logo{
    height:60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
